<template>
  <vxe-modal v-model="winOpen" id="permsWin" :title="title" width="800" height="560" min-width="460" min-height="320" resize remember>
    <vxe-form
        title-colon
        ref="xForm"
        title-align="right"
        title-width="120"
        :data="data"
        :rules="formRules"
        :loading="loading"
        @submit="submitEvent">
      <vxe-form-item title="菜单类型" span="24">
        <template #default="{ data }">
          <vxe-radio-group v-model="data.permsType" @change="handleChange">
            <vxe-radio label="0" content="一级菜单"></vxe-radio>
            <vxe-radio label="1" content="子菜单"></vxe-radio>
            <vxe-radio label="2" content="按钮"></vxe-radio>
            <vxe-radio label="3" content="API"></vxe-radio>
          </vxe-radio-group>
        </template>
      </vxe-form-item>
      <vxe-form-item title="菜单名称" field="permsName" span="24">
        <template #title>
          <span>{{permsFieldName}}</span>
        </template>
        <template #default="{ data }">
        <vxe-input v-model="data.permsName" placeholder="请输入名称" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="前端页面路径" field="component" span="24">
        <template #default="{ data }">
          <vxe-input v-model="data.component" placeholder="请输入前端页面路径" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="菜单路径" field="url" span="24" >
        <template #default="{ data }">
          <vxe-input v-model="data.url" placeholder="请输入菜单路径" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="上级菜单" span="24" v-if="isParentNameShow">
        <template #default="{ data }">
          <vxe-input v-model="data.parentName" :disabled="true"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="请求方式" span="24" v-if="isRequestTypeShow">
        <template #default="{ data }">
          <vxe-radio-group v-model="data.requestType">
            <vxe-radio label="GET" content="GET"></vxe-radio>
            <vxe-radio label="POST" content="POST"></vxe-radio>
            <vxe-radio label="PUT" content="PUT"></vxe-radio>
            <vxe-radio label="PATCH" content="PATCH"></vxe-radio>
            <vxe-radio label="DELETE" content="DELETE"></vxe-radio>
          </vxe-radio-group>
        </template>
      </vxe-form-item>
      <vxe-form-item title="授权标识"  span="24" v-if="isRequestTypeShow">
        <template #default="{ data }">
          <vxe-input v-model="data.permsCode" placeholder="请输入授权标识" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="排序">
        <template #default="{ data }">
          <vxe-input v-model="data.sortNo" type="integer" placeholder="请输入排序号" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="是否有效" span="24">
        <template #default="{ data }">
          <vxe-radio-group v-model="data.validation" >
            <vxe-radio label="1" content="有效"></vxe-radio>
            <vxe-radio label="0" content="无效"></vxe-radio>
          </vxe-radio-group>
        </template>
      </vxe-form-item>

      <vxe-form-item align="right" span="24" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary" plain>保存</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </vxe-modal>
</template>
<script>
export default {
  name: 'PermissionEdit',
  data () {
    return {
      loading: false,
      winOpen: false,
      title: '',
      permsFieldName: '菜单名称',
      isParentNameShow: false,
      isRequestTypeShow: true,
      data: {
        id: '',
        parentId: '',
        parentName: '',
        permsType: '',
        permsName: '',
        url: '',
        component: '',
        requestType: '',
        permsCode: '',
        validation: '1'
      },
      formRules: {
        permsName: [this.$v.required(), this.$v.maxLength(50)],
        component: [this.$v.maxLength(100)],
        url: [this.$v.required(), this.$v.maxLength(100)]
      }
    }
  },
  methods: {
    handleAdd (row) {
      const record = row || { permsType: '0', validation: '1' }
      this.handleEdit(record)
    },
    handleEdit (row) {
      this.winOpen = true
      this.data = Object.assign({}, row)
      this.setPermsNameDisplay(row.permsType)
    },
    handleChange (val) {
      this.setPermsNameDisplay(val.label)
    },
    setPermsNameDisplay (val) {
      if (val === '0') {
        this.permsFieldName = '菜单名称'
        this.isParentNameShow = false
        this.isRequestTypeShow = false
      } else {
        this.isParentNameShow = true
        if (val === '1') {
          this.permsFieldName = '菜单名称'
          this.isRequestTypeShow = false
        } else if (val === '2') {
          this.permsFieldName = '按钮名称'
          this.isRequestTypeShow = true
        } else if (val === '3') {
          this.permsFieldName = 'API名称'
          this.isRequestTypeShow = true
        }
      }
    },
    submitEvent () {
      this.loading = true
      const form = this.$refs.xForm
      form.validate(async (valid) => {
        if (!valid) {
          const formData = Object.assign({}, this.data)
          if (formData.permsType === '0') {
            formData.parentId = ''
          }
          const action = formData.id ? 'system/permsUpdate' : 'system/permsInsert'
          const { error } = await this.$store.dispatch(action, formData)
          this.loading = false
          if (!error) {
            this.$utils.message.success('保存成功！')
            this.winOpen = false
            this.$parent.refresh()
          } else {
            this.$utils.message.error(error.message)
          }
        }
      })
    }
  }
}
</script>
